<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片展示</title>
    <link rel="stylesheet" href="./animate.css">
    <script typet="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
    <style>
    *{margin: 0px;padding: 0px;list-style: none;}
    #box{width: 1000px;margin: 0 auto;}
    #box ul{float: left;width: 200px;margin-right: 50px;overflow: hidden;}
    #box img{width: 200px;}
    #box ul li{
        margin: 20px 0;
        position: relative;
        background: #ddd;
    }
    #box ul li .fuceng{
        height: 100%;
        width: 101%;
        position: absolute;
        top: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.5);
        overflow: auto;
        color: aliceblue;
        padding:5px 15px 0 5px;
        /* display: none; */
    }
    #box ul li .title{
        background: #ddd;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    </style>
</head>
<body>
    <div id="box">
        <ul></ul>
        <ul></ul>
        <ul></ul>
        <ul></ul>
    </div>
    <script>
        var box=document.getElementById('box');
        var ul=box.children;
var addData = new Promise((resolve,reject)=>{
        $.ajax({
                type:'get',
                url:'./data.json',
                dataType:'json',
                success:function(data){
                    resolve(data)
                }
            })
      })  
      addData.then((data)=>{
        console.log(data,'执行成功')
            function insert(num){
                var x=0;
                var srcNum=Math.floor(Math.random()*35);//35是35张图片，可改成任意数，我这里总共是35张图片。
                var newli=document.createElement('li');
                newli.innerHTML=    `
                <img src="${data[num].imgUrl}" alt="${data[num].title}">
                <p class="title">${data[num].title}</p>
                <p class="fuceng animated fadeOutRight">${data[num].desc}</p>
                `;//这是图片的文件名，要求是统一。

                var minH=Math.min(ul[0].clientHeight,ul[1].clientHeight,ul[2].clientHeight,ul[3].clientHeight);
                for (var i = 0; i < ul.length; i++) {
                    if (ul[i].clientHeight==minH) {
                        x=i;
                        break;
                    }
                }
                ul[x].appendChild(newli);
        }
        for (var i = 0; i < data.length; i++) {
            insert(i);
        }
        document.onscroll=function(){
            var viewH=document.body.clientHeight||document.documentElement.clientHeight;
            var winH=document.documentElement.scrollHeight;
            var scrollT=document.body.scrollTop||document.documentElement.scrollTop;
            if (winH-scrollT-viewH<500) {
                for (var i = 0; i < data.length; i++) {
                insert(i);
            }
        }
        }
        //添加动画
        $('#box ul li').mouseenter(function(){
            console.log($(this))
            //添加进入的动画
            $(this).children('.fuceng').removeClass('animated fadeOutRight').addClass('animated fadeInLeft')
        })
        $('#box ul li').mouseleave(function(){
            console.log($(this))
            $(this).children('.fuceng').removeClass('animated fadeInLeft').addClass('animated fadeOutRight')
        })
      })
        
    </script>
</body>
</html>